<template>
  <div class="rolePermission">
    <addHeader :title="'配置模块'" :btnName="'新增角色'" :has-btn="false"></addHeader>
    <div class="treeBody">
      <el-tree
          :data="treeData"
          :props="props"
          ref="tree"
          :default-expand-all="true"
          node-key="id"
          show-checkbox
          :default-checked-keys="defaultCheckKeys"
          @check-change="handleCheckChange">
      </el-tree>
    </div>
    <div class="flex-center" style="margin-top: 30px;">
      <el-button type="primary" @click="submitRoleMenus">提交</el-button>
    </div>

  </div>
</template>

<script>
import addHeader from "../../common/addHeader";
export default {
  name: "rolePermission",
  components:{
    addHeader
  },
  data() {
    return {
      props: {
        label: 'title',
        children: 'items'
      },
      defaultCheckKeys:[],
      treeData:[],
      count: 1,
      roleId:''
    };
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    submitRoleMenus(){
      let nodes = this.$refs.tree.getCheckedNodes()
      let params = {
        "menuIds":nodes.map(x=>x.id).join(';'),
        "roleId": this.roleId
      }
      this.$api.submitRoleMenus(params).then(res=>{
        this.$message.success('配置成功')
      })
    },
  }
}
</script>

<style scoped lang="less">
.rolePermission{
  width:200px;
  height: 100%;
  border-right: 1px solid #eee;
  .treeBody{
    width:100%;
    height: calc(100% - 149px);
    border-right: 1px solid #EEEEEE;
    overflow-y: auto;
  }
}
</style>